<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  .main {
    width: 200px;
    outline: 1px solid blue;
    font-size: 14px;
    word-spacing: unset;
    letter-spacing: unset;
    word-wrap: unset;
  }
  .box  {
    display: inline-block;
    outline: 1px solid red;
    width: 50%;
    height: 100px;
    color: black;
  }
  .box-c {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
<div class="main">

  <div class="box">
<!--    测试1-->
    <div class="box-c">
      a
    </div>
  </div>
  <div class="box">
<!--    测试2-->
    <div class="box-c">
      b
    </div>
  </div>
</div>
<script type="text/javascript">
let animationFrameID = null;
let lastTime = new Date().getTime();
function loop() {
  window.cancelAnimationFrame(animationFrameID);
  animationFrameID = window.requestAnimationFrame(() => {
    const nowTime = new Date().getTime();
    console.log(nowTime - lastTime )
    lastTime = nowTime;
    // 动画
  });
}
// 模拟定时调用
setInterval(()=>{loop();},1)


</script>
</body>
</html>
